<template>
  <div
    v-if="networkMonitor.popUp"
    style="
      position: fixed;
      top: 0px;
      right: 0px;
      z-index: 2147483647;
      color: #FFFFFF;
      font-size: 13px;
      line-height: 51px;
      padding: 0 80px;
    "
    :style="{ 'background-color': !networkMonitor.online && networkMonitor.offline ? '#F56C6C' : '#79BBFF', 'letter-spacing': !networkMonitor.online && networkMonitor.offline ? '0px' : '2px' }"
  >
    <i :class="!networkMonitor.online && networkMonitor.offline ? 'el-icon-warning-outline' : 'el-icon-circle-check'" />
    {{ networkMonitor.content }}
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'SunNetworkHint',
  props: {
    // eslint-disable-next-line vue/require-default-prop
    networkMonitorFunction: {
      type: Function
    }
  },
  data() {
    return {
      offline: false
    }
  },
  computed: {
    ...mapGetters([
      'networkMonitor'
    ])
  },
  watch: {
    networkMonitor: {
      handler: function(data) {
        this.offline = data.offline
        if (data.online && !data.offline) {
          if (this.networkMonitorFunction) {
            this.networkMonitorFunction()
          }
          setTimeout(() => {
            this.$store.dispatch('app/toggleNetworkMonitor', { online: false, offline: false, popUp: false, content: '网络正常' })
          }, 5000)
        }
      },
      deep: true
    }
  },
  methods: {
  }
}
</script>

